<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板自己的主页</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <link rel="stylesheet" href="./css/zy.css">
</head>

<body>

    <!-- 上方用户信息菜单区域 -->

    <div class="p-2 menus">
        <div class="m-2 jg fs">
            <!-- 排版用,无内容 -->
            <div></div>
            <!-- src用户头像加载前展示图片 -->
            <div class="">
                <img id="imgLogo1" src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">
            </div>
            <!-- 返回首页 -->
            <div>
                <span id="sy" class="sb">首页</span>

            </div>

        </div>

        <!-- 搜索框 -->
        <div class="m-2 jg2 main">
            <div class="btn-group">
                <input type="text" class="form-control" placeholder="想了解什么呢" size="20">
                <button type="text" class="input-group-text">搜索</button>
            </div>
        </div>

        <!-- 上方右边展示 -->
        <div class="m-2 jg fs">
            <!-- 未登录展示图片为登录.登录则展示个人头像,将title值清空 -->
            <div class="dx">
                <img id="imgLogo2" src="https://ts1.cn.mm.bing.net/th/id/R-C.dda388ff0021b84efe272b7bf984a6e9?rik=wSzOcqcO2nMl4g&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f01%2f39%2f44%2f65573cbf06762ec.jpg&ehk=Gwz8O8JmkfUyWN9YOHVQQzpUOG68ljDAWS5jmQ4yNJA%3d&risl=&pid=ImgRaw&r=0" alt="">
            </div>
            <span id="hy1" class="sb">好友</span>
            <span id="sqcl" class="sb">消息</span>

            <div> <button id="fbdt" type="text" class="form-control">发表动态</button></div>
        </div>

    </div>

    <!-- 内容 -->
    <div class="dys">
        <div class="">
            <img class="tp" src="./img/tp11.jpg" alt="">
        </div>
        <div class="p-2 menu">
            <div class="zjnr">
                <img id="imgLogo3" class="nrtp" src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">

                <!-- 主页账号名称 -->

                <span id="mc1" class="zymc">zzz</span>


            </div>

            <!-- 用的main的代码 -->
            <div class="dropdown">
                <button class="btn bk dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span id="spUserName">个人资料</span>
                </button>
                <ul class="dropdown-menu">

                    <li>
                        <span id="spEmail" data-bs-toggle="modal" data-bs-target="#yxDialog" class="dropdown-item">绑定邮箱</span>
                    </li>

                    <li>
                        <span id="spTel" data-bs-toggle="modal" data-bs-target="#sjDialog" class="dropdown-item">绑定手机号</span>
                    </li>

                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><span id="spExit" class="dropdown-item">安全退出</span></li>

                </ul>
            </div>




        </div>

        <div class="s">

            <div class="p-2 pl">

                <div class="pll">

                    <span class="m-2 sb">粉丝</span>

                </div>



                <!-- <div class="zjnr">
                    <img class="m-4" id="imgLogo4" src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">



                    <span id="mc2" class="zy">zzz</span>

                </div>
 -->
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>用户头像</th>
                            <th>用户名</th>
                        </tr>
                    </thead>

                    <tbody id="tbdata"></tbody>

                </table>





            </div>


            <div class="p-2 ps">
                <div id="fbdttt" class="fb sb ps1 zbj"> 发表动态</div>

                <div class="fb ps1 s ">
                    <div class="m-3 zbj">总点击量</div>
                    <div class="m-3 ybj">总点赞量</div>
                </div>
            </div>


        </div>
    </div>

    <!-- 第二个评论使用此div -->
    <!-- <div class="s">
            <div class="p-2 pl">
                <div class="zjnr">
                    <img class="m-4" id="imgLogo"
                        src="https://tupian.qqw21.com/article/UploadPic/2020-4/202042621381456461.jpg" alt="">
                    <span class="zy">zzz</span>
                </div>
                <div class="pll1 sb">
                    <span>评论
                    </span>
                </div>
                <div class="pl1">
                    <span class="m-2">点赞</span>
                    <span class="m-2">点击率</span>
                    <span class="m-2">评论</span>

                </div>
            </div>
        </div> -->


    <!-- 底部 -->
    <div class="db">
        <div>©2020 - 2022 By huhuiyu</div>
        <div>Vue3 | Pinia | TypeScript</div>
        <div>Hi, welcome to simple message</div>
    </div>




    <!-- 绑定邮箱对话框 -->
    <div id="yxDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户邮箱绑定</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">

                    <div class="m-3">
                        <input type="text" class="form-control" id="txtEmail" placeholder="邮箱">
                    </div>

                    <div class="m-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="txtEmailCode" placeholder="邮箱验证码">
                            <span id="btnEmailCode" class="input-group-text">获取邮箱验证码</span>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnEmail" type="button" class="btn btn-primary">
                        保存
                    </button>

                </div>
            </div>
        </div>
    </div>

    <!-- 绑定手机对话框 -->
    <div id="sjDialog" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户邮箱绑定</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="m-3">
                        <input type="text" class="form-control" id="txtphone" placeholder="手机号码">
                    </div>

                    <div class="m-3">
                        <div class="input-group">
                            <input id="txtimageCode" type="text" class="form-control" placeholder="图片验证码">
                            <img id="imageCode" src="" alt="">
                        </div>
                    </div>


                    <div class="m-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="txtcode" placeholder="手机验证码">
                            <span id="btncode" class="input-group-text">获取手机验证码</span>
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button id="btnbd" type="button" class="btn btn-primary">
                        保存
                    </button>

                </div>
            </div>
        </div>
    </div>



    <!-- 公用的消息轻提示 -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">服务器消息</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Hello, world! This is a toast message.
            </div>
        </div>
    </div>
    <!-- 公用的消息轻提示结束 -->

    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <script src="./js/zy.js" type="module"></script>
</body>

</html>